<script setup>
import { Search, Menu } from "@vicons/ionicons5";
</script>

<template>
  <div class="header">
    <div class="input-header">
      <n-icon class="menu"  color="#6F7371" :size="26" :component="Menu" />
      <div class="input">
        <n-input round placeholder="Search">
          <template #suffix>
            <n-icon :size="20"  color="#80BEFD" :component="Search" />
          </template>
        </n-input>
      </div>
    </div>
    <div class="swiper">
      <img src="@/assets/img/swiper.webp">
      <div class="author">
        <div class="author-left">
          <p class="title">夏灿</p>
          <p class="sign">真正的危险是，我们听多了谎言，便不再能分辨出真相。</p>
        </div>
        <div class="author-img">
          <img src="@/assets/img/photo.jpg">
        </div>
      </div>
    </div>
  </div>
</template>


<style lang="less" scoped>
  .header{
    width: 100%;
    background-color: rgba(235,238,245,0.8);
    .input-header{
      display: flex;
      align-items: center;
      margin-left: 20px;
      height: 60px;
      .input{
        display: flex;
        align-items: center;
        width: 180px;
        height: 100%;
      }
      .menu{
        margin-right: 6px;
      }
    }
    .swiper{
      position: relative;
      width: 100%;
      height: 250px;
      img{
        width: 100%;
        height: 100%;
      }
      .author{
        position: absolute;
        right: 40px;
        bottom: 20px;
        display: flex;
        .author-left{
          margin-right: 10px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: self-end;
          font-size: 20px;
          .title{
            margin-bottom: 5px;
            color: #fff;
          }
          .sign{
            font-size: 13px;
            text-align: right;
            color: #d6d6d6;
          }
        }
        .author-img{
          width: 60px;
          height: 60px;
          img{
            border-radius: 12px;
          }
        }
      }
    }
  }
  :deep(.n-input){
    background-color: rgba(235,238,245,0.6);
  }
</style>
